<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>云收藏</title>
	<base target="_blank">
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-header class="title">
			<div class="c900 flex">
				<el-link :underline="false" href="index.html">
					<h1>云收藏</h1>
				</el-link>
				<el-input style="width: auto" placeholder="请输入搜索关键字">
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
				<div class="flex" v-if="user.head ">
					<el-avatar v-if="user.head" :src=" user.head || ''"></el-avatar>
					<el-link @click="location.href = 'login.html'">退出</el-link>
					<el-link v-if="JSON.stringify(this.user)!='{head:}'" @click="location.href = 'updatePwd.html'">修改密码</el-link>

				</div>
				<div class="flex" v-else>
					<el-avatar v-if="user.head" :src=" user.head || ''"></el-avatar>
					<el-link @click="location.href = 'reg.html'">注册</el-link>
					<el-link @click="location.href = 'login.html'">登录</el-link>
				</div>

			</div>
		</el-header>
		<el-main>
			<div class="c900 h100">
				<el-container class="h100">
					<el-aside class="h100">
						<el-menu class="h100" default-active="2" @select="filterFav">
							<el-menu-item index="a1">
								<el-button type="primary" @click="showEdit=true">新增</el-button>
							</el-menu-item>
							<el-menu-item index="a2">
								<span>全部 ({{data.allFavs.length}})</span>
							</el-menu-item>
							<el-menu-item index="a3">
								<span>未分类 ({{data.allFavs.filter(f=>f.tags.length==0).length}})</span>
							</el-menu-item>
							<el-menu-item v-for="t in data.tags" :index="t.id"
							              v-if="data.tagFavs.filter(tf=>tf.tid==t.id).length > 0">
								<div class="flex">
									<span>{{t.name}} ({{data.tagFavs.filter(tf=>tf.tid==t.id).length}})</span>
									<el-button type="text">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="a4">
								<span>云图</span>
							</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main>
						<el-card v-for="f in data.favs">
							<div slot="header" class="flex">
								<div class="flex">
									<el-link :href="f.addr" :underline="false">
										<div class="flex">
											<img :src="f.image || noImage">
											<h3>{{f.name}}</h3>
											{{f.addr}}
										</div>
									</el-link>
									<small>访问量:{{f.opens || 0}}</small>
								</div>
								<div>
									<el-button type="text">置顶</el-button>
									<el-button type="text" @click="Object.assign(fav,f);showEdit=true">修改</el-button>
									<el-button type="text">删除</el-button>
								</div>
							</div>
							<div>
								<el-tag v-for=" tag in f.tags.split(/[，,;；\s]+/)"   size='mini'>
									{{tag}}
								</el-tag>
							</div>
							<p>{{f.intro}}</p>
						</el-card>
					</el-main>
				</el-container>
			</div>
		</el-main>
		<el-footer class="flex title" style="justify-content: center;height: 30px">
			<a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
		</el-footer>
	</el-container>
	<el-dialog title="添加网址" :visible.sync="showEdit">
		<el-form>
			<el-form-item label="地址:" label-width="50px">
				<el-input v-model="fav.addr" @change="getPageInfo" autocomplete="off" placeholder="输入http开头的网页地址"></el-input>
			</el-form-item>
			<el-form-item label="名称:" label-width="50px">
				<el-input v-model="fav.name" autocomplete="off" placeholder="网站名称"></el-input>
			</el-form-item>
			<el-form-item label="分类:" label-width="50px">
				<el-input v-model="fav.tags" autocomplete="off" placeholder="每个分类用 ; 号隔开, 例如: 游戏;新闻"></el-input>
			</el-form-item>
			<el-form-item label="图片:" label-width="50px">
				<el-input v-model="fav.image" autocomplete="off" placeholder="输入http开头的网图片地址">
					<el-upload slot="append">
						<el-button>上传图片</el-button>
					</el-upload>
				</el-input>
			</el-form-item>
			<el-form-item label="描述:" label-width="50px">
				<el-input v-model="fav.intro" autocomplete="off" type="textarea" :rows="3" placeholder="输入网站说明, 不超出200个字"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showEdit = false">取 消</el-button>
			<el-button type="primary" @click="save()">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			showEdit: false,
			fav:{name:"",addr:"",tags:"",image:"",intro:""},
			// TODO 负责登录界面的同学, 修改这里的代码
			user:{head:''},
			data:{favs:[],tags:[],tagFavs:[],allFavs:[]},
			noImage:'https://img0.baidu.com/it/u=447433031,4160304780&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=300',
		},
		created(){
			axios.get("queryTagFav").then(res=>{
				if(res.data.code == 0){
					//未登录
					location.href = "login.html";
				}else {
					this.data = res.data;
					this.data.allFavs = [];
					this.data.allFavs = this.data.allFavs.concat(this.data.favs);
				}
			});
			this.queryUserInfo();
		},
		methods:{
			queryUserInfo(){
				axios.get("queryUserInfo").then(resp=>{
					this.user = resp.data;
					console.log(this.user);
					//需要未登录跳转登录页面，删除注释
					// if(!this.user.id){
					// 	location.href="login.html";
					// }
				});
			},
			save(){
				let p = new URLSearchParams();
				for (const favKey in this.fav) {
					p.append(favKey, this.fav[favKey])
				}
				axios.post("addFav",p).then(res=>{
					if(res.data.code ==1){
						this.$message(res.data.msg);
					} else {
						this.$alert(res.data.msg);
					}
				})
			},
			filterFav(index, indexPath){
				if(index == 'a2'){
					this.data.favs = this.data.allFavs;
				} else if (index == 'a3'){
					this.data.favs = this.data.allFavs.filter(f=>f.tags.length==0);
				} else if(index == 'a1'){
					return;
				} else if(index == 'a4'){
					// TODO 云图
					return;
				} else {
					let tid = index;
					this.data.favs = this.data.tagFavs
							.filter(tf=>tf.tid==tid)   // 3,6
							.map(tf=>{
								let arr = this.data.allFavs.filter(f=> f.id == tf.fid );
								return arr[0];
							});
				}
			},
			getPageInfo(){
				axios.get("pageInfo",{
					params:{
						addr : this.fav.addr
					}
				}).then(res=>{
					console.info(res.data);
					this.fav.name = res.data.name;
					this.fav.tags = res.data.tags;
					this.fav.intro = res.data.intro;
				});
			}
		}
	})
</script>
<style>
	html,body{
		margin: 0px;
		padding: 0px;
	}
	#app>.el-container>.el-main{
		overflow-x: hidden;
		background-image: url("https://img2.baidu.com/it/u=2076726300,191426335&fm=253&fmt=auto?w=500&h=500");
		background-size: cover;
	}
	.el-main{
		padding: 0px 10px;
	}
	.el-card{
		margin-top: 10px;
	}
	html,body,#app,#app>.el-container{
		height: 100%;
	}
	*{
		transition: all .5s;
	}
	a{
		text-decoration: none;
	}
	.c900{
		width: 1000px;
		margin: auto;
	}
	.title{
		background-color: #0a699999;
		color: #fff;
	}
	.title *{
		color: #fff;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 10px;
	}
	.flex>*{
		margin: 0px;
		padding: 0px;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav{
		display: flex;
		height: 100%;
	}
	nav .el-link{
		padding-inline: 20px;
		font-size: 1em;
	}
	nav .el-link:hover{
		background-color: #99f7;
	}
	img{
		width: 40px;
		height: 40px;
		object-fit: cover;
	}
	.hsc:hover{
		transform: scale(1.1);
		box-shadow: 3px 3px 3px 3px #8888;
	}
	.grid2{
		display: grid;
		grid-template-columns: auto auto;
	}
	.grid3{
		display: grid;
		grid-template-columns: auto auto auto;
	}
	.grid4{
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	.h100{
		height: 100%;
	}
	small{
		font-size: .7em;
		color: #989
	}
</style>

</html>